<template>
  <view class="card-list-container">
    <view class="card-list">
      <view v-for="(card, index) in cardList" :key="`${card.id}-${currentPage}`"
        :class="['card']"
        :style="{ backgroundImage: `url(${card.backgroundImage}?t=${uniqueTimestamp})` }" @click="navigateToDetail(card.id)">
        <view class="content">
          <view class="header">
            <view class="title">{{ card.title }}</view>
          </view>
          <view class="body">
            <view class="text">{{ card.text }}</view>
          </view>
        </view>
      </view>
    </view>
    <van-pagination v-model:current-page="currentPage" :total-items="totalItems" :items-per-page="itemsPerPage"
      @change="onPageChange" />
  </view>
</template>

<script>
  import { listSci } from '@/api/system/sci';

  export default {
    data() {
      return {
        cardList: [],
        currentPage: 1,
        totalItems: 0,
        itemsPerPage: 4,
        loading: true,
        uniqueTimestamp: new Date().getTime(),
      };
    },
    methods: {
      async fetchSciList(page = 1) {
        this.loading = true;
        try {
          const response = await listSci({ pageNum: page, pageSize: this.itemsPerPage });
          if (response && response.code === 200) {
            const { rows, total } = response;
            this.totalItems = total;
            this.cardList = rows.map(sci => ({
              title: sci.title,
              backgroundImage: sci.cover || 'default-image-url',
              text: sci.info || 'No information available',
              id: sci.id,
            }));
            // 更新唯一时间戳
            this.uniqueTimestamp = new Date().getTime();
          } else {
            console.error('Failed to fetch sci list:', response.msg || 'Unknown error');
          }
        } catch (error) {
          console.error('Failed to fetch sci list:', error);
        } finally {
          this.loading = false;
        }
      },
      onPageChange(page) {
        this.currentPage = page;
        this.fetchSciList(page);
      },
      navigateToDetail(id) {
        this.$tab.navigateTo(`/pages/sci/sci?id=${id}`);
      },
    },
    created() {
      this.fetchSciList();
    }
  };
</script>

<style scoped>
  .van-pagination {
    padding-bottom: 20px;
  }
  .card-list-container {
    padding: 0;
    background-color: #f0fff0;
  }
  .card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
  }
  .card {
    position: relative;
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border: 1px solid #ccc;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    color: #fff;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .title {
    font-size: 28rpx;
    font-weight: bold;
    padding: 8px 16px;
    background-color: #b8860b;
    border-top-right-radius: 8px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    align-self: flex-start;
    position: relative;
    margin-left: -20px;
  }
  .title::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    border-width: 10px 0 0 10px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
    border-style: solid;
  }
  .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
  }
  .text {
    font-size: 24rpx;
    flex: 1;
    color: #fff;
  }
  uni-page-head .uni-page-head-hd {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 21px;
    background: url(/static/images/back.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    margin: 6px 0 0 12px;
    line-height: 99px;
  }
  .uni-page-head .uni-page-head-btn {
    background-color: #000 !important;
  }
  uni-app, .uni-page-head {
    display: block;
    box-sizing: border-box;
    height: 63px;
    background: #6db87b;
  }
  .uni-page-head {
    background-color: rgb(38, 156, 86);
    color: rgb(255, 255, 255);
    height: 63px;
    font-size: 24px;
    line-height: 53px;
  }
</style>
